<template>
  <ul ref="hotMovie" class="hotMovie" v-infinite-scroll="getUpdateData" infinite-scroll-delay="300"
      @scroll="getScrollTop">
    <li v-for="hot in hotList.hot" :key="hot.id" @click.stop="skipDetails(hot)">
      <img :src="replaceSrc(hot.img)" alt="">
      <div>
        <div>
          <h5>{{ hot.nm }} <span v-show="hot.ver.includes('IMAX')"><i>2D</i>IMAX</span></h5>
          <p v-if="hot.globalReleased===false">{{ hot.wish }}<span>人想看</span></p>
          <p v-else-if=" hot.sc !==0">{{ hot.sc }} <span>分</span></p>
          <p v-else><span style="color:#999;">暂无评分</span></p>
        </div>
        <p>{{ hot.cat }}</p>
        <p>{{ hot.desc }}</p>
        <p v-if="hot.globalReleased===false">{{ hot.showTimeInfo }}</p>
        <p v-else> {{ hot.showInfo }}</p>
        <span v-if="hot.globalReleased===false"
              :class="['buyTicket', {'primary-bgc':hot.globalReleased===false }]">预售</span>
        <span v-else :class="['buyTicket', {'denger-bgc' :hot.globalReleased===true }]">购票</span>
      </div>
    </li>
  </ul>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    name: "HotMovie",
    components: {},
    computed: {
      ...mapState('hotMovie', ['hotMovieList']),
      ...mapState('movieDetails', ['actors', 'moviePhotos', 'comments', 'movieMessage']),
    },
    data() {
      return {
        limit: 12,
        city: '广州',
        currentPage: 0,
        hotList: {},
        scrollTop: 0
      }
    },

    activated() {//保留滚动位置
      this.$refs.hotMovie.scrollTop = this.scrollTop
    },
    async created() {
      await this.getHotMovies({city: this.city, currentPage: this.currentPage, limit: this.limit})
      this.hotList = this.hotMovieList
    },
    methods: {
      ...mapActions('hotMovie', ['getHotMovies']),
      ...mapActions('movieDetails', ['getActors', 'getMoviePhoto', 'getComments', 'getMovieMessage']),
      replaceSrc(src) {
        src = src.replace('/w.h', '')
        return src
      },
      async getUpdateData() { //滚动底部添加数据
        this.currentPage++
        await this.getHotMovies({city: this.city, currentPage: this.currentPage, limit: this.limit})
        this.hotMovieList.hot.forEach(item => this.hotList.hot.push(item))

      },
      getScrollTop: (function (waitTime) { //节流代码获取滚动距离
        let beforeChangeTime = 0
        return function () {
          let afterChangeTime = Date.now()
          if (afterChangeTime - beforeChangeTime > waitTime) {
            beforeChangeTime = afterChangeTime
            this.scrollTop = this.$refs.hotMovie.scrollTop //记录滚动距离
          }
        }
      })(100),
      async skipDetails(data) { //跳转详情页
        await this.getActors(data.id)
        await this.getMoviePhoto(data.id)
        localStorage.setItem('actors', JSON.stringify(this.actors)) //利用localStorage将演员存储在浏览器中
        localStorage.setItem('moviePhotos', JSON.stringify(this.moviePhotos))//利用localStorage将剧照存储在浏览器中
        await this.getComments({id: data.id, limit: 10, currentPage: 0})
        localStorage.setItem('comments', JSON.stringify(this.comments)) //存储评论
        await this.getMovieMessage({id: data.id, ci: this.ci})
        localStorage.setItem('movieMessage', JSON.stringify(this.movieMessage))
        this.$router.push('/movie-details')
      }
    },

  }
</script>

<style lang="scss" scoped>
  @import '../../assets/scss/variable.scss';
  @import '../../assets/scss/mixin.scss';

  ul.hotMovie {
    flex: 1;
    overflow-y: scroll;

    > li {
      height: 1.15rem;
      display: flex;
      padding: 0.12rem;
      @include border-bottom-1px;
      position: relative;

      > img {
        width: 0.64rem;
        height: 0.9rem;
        margin-right: 0.11rem;
      }

      > div {
        flex: 1;

        > div {
          display: flex;
          width: 100%;
          justify-content: space-between;

          > h5 {
            font-weight: normal;
            color: $font-black-color;
            font-size: 0.16rem;
            margin-right: 0.1rem;
            display: flex;
            line-height: 0.25rem;

            span {
              width: 0.48rem;
              padding-right: 0.08rem;
              height: 0.14rem;
              border: 0.01rem solid #8bb7ce;
              color: #8bb7ce;
              border-radius: 0.04rem;
              font-size: 0.12rem;
              line-height: 0.14rem;
              margin-left: 0.05rem;
              margin-top: 0.05rem;


              i {
                font-style: normal;
                width: 0.16rem;
                background-color: #8bb7ce;
                color: #fff;
                margin-right: 0.04rem;
                border-bottom-left-radius: 0.04rem;
                border-top-left-radius: 0.04rem;
              }
            }
          }

          > p {
            font-size: 0.16rem;
            color: #ffb400;

            > span {
              font-size: 0.12rem;
            }
          }
        }

        > p {
          font-size: 0.14rem;
          color: #666;
          line-height: 0.21rem;
          width: 2.2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;


          &:last-child {
            color: $font-primary-color;
          }
        }
      }

      .buyTicket {
        display: block;
        width: 0.47rem;
        height: 0.28rem;
        border-radius: 0.05rem;
        color: #fff;
        position: absolute;
        right: 0.12rem;
        bottom: 0.32rem;
        line-height: 0.28rem;
        text-align: center;
        font-size: 0.12rem;
      }

      .primary-bgc {
        background-color: #52b0eb;
      }

      .denger-bgc {
        background-color: #ef4238;
      }
    }
  }
</style>